<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas width="600" height="400"></canvas>
  </body>
</html>
<script>
  //获取DOM节点
  let canvas = document.querySelector("canvas");
  //获取上下文
  let ctx = canvas.getContext("2d");
  //绘制矩形第一种方式:参数为x、y、width、height
  //这种的矩形没有办法设置填充颜色
  ctx.strokeRect(100, 200, 100, 200);
  //第二种方式绘制矩形
  //填充颜色可以替换
  //绘制图形之前设置填充颜色
  ctx.fillStyle = "skyblue";
  ctx.fill();
  ctx.fillRect(300, 200, 100, 200);
</script>
